<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息</title>
    <link rel="stylesheet" href="static/elementui.css">
    <link rel="stylesheet" href="static/elementui.css">
    <script src="static/vue@2.6.14.js"></script>
    <script src="static/elementui.js"></script>
    <script src="static/axios.min.js"></script>
    <style>
        body {
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
        }

        #app {
            max-width: 800px;
            margin: 0 auto;
        }

        .welcome-card {
            margin-bottom: 20px;
        }

        .welcome-header {
            font-size: 24px;
            margin-bottom: 20px;
            color: #303133;
        }

        .user-info {
            margin-bottom: 15px;
        }

        .user-info-label {
            font-weight: bold;
            color: #606266;
        }

        .avatar-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 2px solid #409EFF;
        }

        .edit-button {
            margin-top: 20px;
        }

        .el-dialog__body {
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card class="welcome-card">
        <div slot="header" class="welcome-header">
            <span>欢迎，{{ user.username }}</span>
        </div>
        <div class="avatar-container">
            <el-avatar :size="120" :src="user.avatar" icon="el-icon-user-solid"></el-avatar>
        </div>
        <el-descriptions :column="1" border>
            <el-descriptions-item label="名称">{{ user.fullname }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ user.phoneNumber }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{ user.address }}</el-descriptions-item>
            <el-descriptions-item label="简介">{{ user.bio }}</el-descriptions-item>
            <el-descriptions-item label="角色类型">{{ user.roleType }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ user.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="最后登录时间">{{ user.lastLogin }}</el-descriptions-item>
            <el-descriptions-item label="激活状态">
                <el-tag :type="user.isActive === 'true' ? 'success' : 'danger'">
                    {{ user.isActive }}
                </el-tag>
            </el-descriptions-item>
        </el-descriptions>
        <el-button type="primary" @click="editUser" class="edit-button">编辑</el-button>
    </el-card>

    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="50%">
        <el-form :model="editForm" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="editForm.fullname"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="editForm.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="editForm.address"></el-input>
            </el-form-item>
            <el-form-item label="简介">
                <el-input type="textarea" v-model="editForm.bio"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="editForm.avatar" :src="editForm.avatar" class="avatar"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateUserInfo">确认</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user: {},
                dialogVisible: false,
                editForm: {
                    username: '',
                    email: '',
                    phoneNumber: '',
                    address: '',
                    bio: '',
                    avatar: ''
                }
            };
        },
        mounted() {
            // 从 localStorage 读取用户信息
            const userData = localStorage.getItem('user');
            if (userData) {
                this.user = JSON.parse(userData);
            }
        },
        methods: {
            editUser() {
                this.editForm = {...this.user};
                this.dialogVisible = true;
            },
            handleAvatarSuccess(response, file) {
                if (response.code === 200) {
                    this.editForm.avatar = response.data;
                    this.$message.success('头像上传成功');
                } else {
                    this.$message.error('头像上传失败');
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            updateUserInfo() {
                axios.post('/user?operation=updateUser', this.editForm)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.$message.success('更新用户信息成功');
                            this.user = {...this.editForm};
                            localStorage.setItem('user', JSON.stringify(this.user));
                            this.dialogVisible = false;
                        } else {
                            this.$message.error('更新用户信息失败');
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        this.$message.error('更新用户信息失败');
                    });
            }
        }
    });
</script>
</body>
</html>